<template>
  <div class="app-container">
    <!--  查询  -->
    <el-card>
      <el-form :inline="true" :model="formInline" class="demo-form-inline cardH">
        <el-form-item label="方案名称">
          <el-input v-model="formInline.name" size="mini" clearable placeholder="请输入方案名称" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="mini" @click="search">查询</el-button>
          <el-button type="primary" size="mini" @click="addOrEdit(1)">新增</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <!-- 表格 -->
    <el-card style="margin-top: 20px">
      <!--  table  -->
      <el-table
        :data="tableData"
        style="width: 100%;margin-top: 20px"
        size="mini"
        :default-sort="{prop: formInline.sort, order: formInline.order}"
        @sort-change="tableSortChange"
      >
        <el-table-column
          prop="name"
          label="方案名称"
          align="center"
        />
        <el-table-column
          prop="feng_price"
          label="峰电价"
          align="center"
        />
        <el-table-column
          prop="ping_price"
          label="平电价"
          align="center"
        />
        <el-table-column
          prop="gu_price"
          label="谷电价"
          align="center"
        />
        <el-table-column
          prop="gu_price"
          label="尖电价"
          align="center"
        />
        <el-table-column
          label="状态"
          align="center"
        >
          <template slot-scope="scope">
            <el-tag :type="scope.row.status === 1 ? 'success' : 'danger'">{{ scope.row.status === 1 ? '正常' : '禁用' }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          width="300"
          align="center"
        >
          <template slot-scope="scope">
            <el-button
              type="info"
              size="mini"
              @click="addOrEdit(3, scope.row.id)"
            >
              详情
            </el-button>
            <el-button
              type="warning"
              size="mini"
              @click="addOrEdit(2, scope.row.id)"
            >
              修改
            </el-button>
            <el-button
              type="danger"
              size="mini"
              @click="del(scope.row.id)"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--   分页   -->
      <el-pagination
        style="float: right;"
        :page-size="10"
        :current-page="formInline.offset"
        layout="total, prev, pager, next, jumper"
        :total="total"
        @current-change="handleCurrentChange"
      />
    </el-card>
    <!--  详情组件  -->
    <div v-if="detailFlag">
      <Detail
        :id="detailId"
        :dialog-visible="detailFlag"
        :title="detailTitle"
        @close="close"
        @confirm="confirm"
      />
    </div>
    <!--  查看  -->
    <div v-if="infoFlag">
      <Info
        :id="detailId"
        :dialog-visible="infoFlag"
        @close="closeInfo"
      />
    </div>
  </div>
</template>

<script>
import { QuoteList, deleteQuote } from '@/api/fileManage'
import Detail from './components/detail'
import Info from './components/info'
export default {
  name: 'index',
  components: {
    Detail,
    Info
  },
  data() {
    return {
      detailTitle: '', // 弹窗标题
      detailFlag: false, // 弹窗标识
      infoFlag: false, // 详情标识
      detailId: 0, // 详情id
      tableData: [], // 表格数据
      total: 0, // 数据总量
      formInline: {
        name: '', // 名称
        sort: 'created_at',
        offset: 0,
        limit: 10,
        order: 'descending'
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    /**
     * @description: 查询
     * @author: 书童
     */
    search() {
      this.formInline.offset = 0
      this.getList()
    },
    /**
     * @description: 新增或编辑 模板
     * @author: 书童
     * @param: 1新增，2编辑
     */
    addOrEdit(num, id) {
      if (num === 1) {
        this.detailTitle = '新增'
        this.detailFlag = true
        // this.detailId = id
      } else if (num === 3) {
        this.detailId = id
        this.infoFlag = true
      } else {
        this.detailTitle = '编辑'
        this.detailId = id
        this.detailFlag = true
      }
    },
    /**
     * @description: 删除
     * @author: 书童
     */
    del(id) {
      this.$confirm('是否要删除此条数据?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteQuote({ id }).then(res => {
          this.$message({
            message: '删除成功',
            type: 'success'
          })
          this.getList()
        })
      })
    },
    // 跳转
    handleCurrentChange(val) {
      this.formInline.offset = val
      this.getList()
    },
    /**
     * @description: 排序
     * @author: 书童
     */
    tableSortChange(column) {
      this.formInline.order = column.order ? column.order : 'ascending'
      this.formInline.sort = column.prop
      this.formInline.offset = 0
      this.getList()
    },
    //  获取数据参数列表
    getList() {
      QuoteList(this.formInline).then(res => {
        this.tableData = res.data.list
        this.total = res.data.total
      })
    },
    // 弹窗返回
    confirm() {
      this.close()
      this.getList()
    },
    //  关闭弹窗组件
    close() {
      this.detailFlag = false
      this.detailId = 0
    },
    closeInfo() {
      this.infoFlag = false
      this.detailId = 0
    }
  }
}
</script>

<style scoped>

</style>
